<template>
    <div>
        <Header> </Header>

        <div class="mblog">
            <h2>{{blog.title}}</h2>
            <el-link icon="el-icon-edit" v-if="ownBlog">
                <router-link :to="{name: 'BlogEdit',params: {blogId: blog.id} }">
                    编辑
                </router-link>
                </el-link>
            <el-divider></el-divider>
            <div class="markdown-body" v-html="blog.content"></div>
        </div>

    </div>
</template>

<script>
    import Header from "../components/Header";
    import "github-markdown-css/github-markdown.css"
    export default {
        name: "BlogDetail",
        components: {Header},
        data() {
            return {
                blog: {
                    id: "",
                    title: "默认",
                    content: "内容"
                },
                ownBlog: false
            }
        },
        created() {
            const  blogId = this.$route.params.blogId;
            const _this = this;
            //内容回显
            if (blogId){
                this.axios.get("/blog/" + blogId).then(res =>{
                    const blog = res.data.data;
                    _this.blog.id = blog.id
                    _this.blog.title = blog.title
                    var markdownIt = require("markdown-it")
                    var md =new markdownIt();
                    var result = md.render(blog.content)
                    _this.blog.content = result

                    _this.ownBlog=(blog.userId === _this.$store.getters.GETUSER.id)
                })
            }
        }
    }

</script>

<style scoped>
.mblog{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: 700px;
    padding: 20px 15px;
}
</style>